<template>
    <div>
        <div class="banner">
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
  <van-swipe-item>
    <img src="../assets/img/banner.jpg" alt="">
  </van-swipe-item>
  <van-swipe-item>
    <img src="../assets/轮播图.webp" alt="">
  </van-swipe-item>
  <van-swipe-item>
    <img src="../assets/轮播图2.webp" alt="">
  </van-swipe-item>
</van-swipe>
        </div>

        <!-- <div class="zonebox">
            <div class="textbox">
                <p>借阅专区</p>
                <div class="box">
                    <a href=""><i></i></a>
                    <a href="">借阅说明</a>
                </div>
            </div>

            <div class="navbook">
                <div class="itembox">
                    <img src="../assets/img/seek_icon_classification.png" alt="">
                    <a href="">全部分类</a>
                </div>

                <div class="itembox">
                    <img src="../assets/img/seek_icon_classification.png" alt="">
                    <a href="">VIP专区</a>
                </div>

                <div class="itembox">
                    <img src="../assets/img/seek_icon_classification.png" alt="">
                    <a href="">企业藏书馆</a>
                </div>

            </div>

        </div> -->

        <div class="bookbox">
            <div class="titlebox">
                <p>热门借阅</p>
                <div class="abox">
                    <a href="">查看更多</a>
                    <a href=""><i></i></a>
                </div>
            </div>

            <div class="newbook">

                <div class="book-box">
                    <div class="imgbox" v-for="item in express.slice(0, 3)" :key="item.bookId"
                        @click="bookDetail(item)">
                        <div class="img">
                            <img :src="item.bookCover" alt="">
                        </div>
                        <span>{{ item.bookName }}</span>
                    </div>
                </div>

                <div class="book-box">
                    <div class="imgbox" v-for="item in express.slice(3, 6)" :key="item.bookId"
                        @click="bookDetail(item)">
                        <div class="img">
                            <img :src="item.bookCover" alt="">
                        </div>
                        <span>{{ item.bookName }}</span>
                    </div>


                </div>

            </div>
        </div>

        <div class="bookbox">
            <div class="titlebox">
                <p>VIP会员馆</p>
                <div class="abox">
                    <a href="">查看更多</a>
                    <a href=""><i></i></a>
                </div>
            </div>

            <div class="newbook">

                <div class="book-box">
                    <div class="imgbox" v-for="item in express.slice(2, 5)" :key="item.bookId" @click="book(item)">
                        <div class="img">
                            <img :src="item.bookCover" alt="">
                        </div>
                        <span>{{ item.bookName }}</span>
                    </div>

                </div>

            </div>
        </div>


        <div class="bookbox">
            <div class="titlebox">
                <p>本周上新</p>
                <div class="abox">
                    <a href="">查看更多</a>
                    <a href=""><i></i></a>
                </div>
            </div>

            <div class="newbook">

                <div class="book-box">
                    <div class="imgbox" v-for="item in express.slice(0, 3)" :key="item.bookId"
                        @click="bookDetail(item)">
                        <div class="img">
                            <img :src="item.bookCover" alt="">
                        </div>
                        <span>{{ item.bookName }}</span>
                    </div>


                </div>

                <div class="book-box">
                    <div class="imgbox" v-for="item in express.slice(3, 6)" :key="item.bookId"
                        @click="bookDetail(item)">
                        <div class="img">
                            <img :src="item.bookCover" alt="">
                        </div>
                        <span>{{ item.bookName }}</span>
                    </div>
                </div>

            </div>
        </div>

    </div>
</template>

<script>
import { getExpressData } from "../api/home.js";
export default {

    data() {
        return {
            express: [],
            resbooks:[],

        }
    },

    // mounted() {
    //     this.getass()
    // },


    methods: {

        // getass() {
        //     this.$axios.get('https://apis.netstart.cn/yunyuedu/store/bookList.json?uuid=83821f1710b74569a7afb68afac96d1c').then((data) => {
        //         console.log(134, data);
        //         this.resbooks = data.data.books
        //         console.log(999,this.resbooks)

        //     })
        // },


        getExpressDataFun() {
            getExpressData().then((data) => {
                console.log(data)
                this.express = data.records
                console.log("express", this.express)
            })
        },

        book(item) {
            this.express = item
            localStorage.setItem("forms", JSON.stringify(this.express))
            this.$router.push("/DetailView")
        },
        bookDetail(item) {
            this.express = item
            localStorage.setItem("forms", JSON.stringify(this.express))
            // localStorage.setItem("formsbook", JSON.stringify(this.resbooks))
            this.$router.push("/GratisDetall")
        }
    },

    created() {
        // 调用方法
        this.getExpressDataFun()
    }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/base.css';



.banner {
    background-color: #fff;
    padding: 12px;
    height: 150px;
    margin-top: 62px;

    img {
        width: 350px;
        height: 147px;
        border-radius: 6px;
    }
}

.zonebox {


    background-color: #fff;
    padding: 10px 16px;

    .textbox {
        display: flex;
        justify-content: space-between;
        align-items: center;

        p {
            color: #111e36;
            font-size: 20px;
        }

        .box {
            display: flex;

            a {
                font-size: 14px;
                color: #bec5d2;

                i {
                    width: 20px;
                    height: 20px;
                    background: url(../assets/img/top_ic_help.png) center center no-repeat;
                    background-size: 100%;
                    display: inline-block;
                }
            }
        }
    }

    .navbook {
        margin-top: 22px;
        display: flex;
        justify-content: space-around;

        .itembox {
            display: flex;
            align-items: center;
            flex-direction: column;

            img {
                width: 30px;
                height: 30px;
            }

            a {
                font-size: 12px;
                padding-top: 6px;
                color: #788190;
            }
        }
    }
}

/* 热门借阅 */
.bookbox {
    background-color: #fff;
    padding: 30px 12px;
    padding-bottom: 0px;

    .titlebox {
        display: flex;
        justify-content: space-between;
        align-items: baseline;

        p {
            font-size: 20px;
            color: #000;
            font-weight: bold;
        }

        .abox {
            display: flex;
            align-items: center;

            a {
                padding-right: 2px;
                font-size: 14px;
                color: #cdd2dc;

                i {
                    width: 12px;
                    height: 12px;
                    background: url(../assets/img/icon_common_more.png) center center no-repeat;
                    background-size: 100%;
                    display: inline-block;
                    margin-top: 4px;
                }
            }
        }
    }
}

.newbook {
    background-color: #fff;
    padding: 0 18px;
    margin-top: 22px;

    .book-box {
        display: flex;
        justify-content: space-between;
    }

    .imgbox {
        height: 170px;
        width: 88px;

        .img {
            width: auto;
            height: 120px;
            padding-right: 4px;

            img {
                width: 82px;
                height: 120px;
            }
        }

        span {
            padding-top: 4px;
            font-size: 13px;
        }
    }
}
</style>